<template>
  <transition name="translate">
    <div class="meeting">
      <common-back :content="title"></common-back>
      <ul class="about-list">
        <li class="about-item"
            v-for="(item, index) of list"
            :key="index"
            @click="handleDetail(item)">
          <div class="desc">{{item.content}}</div>
          <i class="iconfont">&#xe6bf;</i>
        </li>
      </ul>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
export default {
  name: 'Memetting',
  components: {
    CommonBack
  },
  data () {
    return {
      title: '发起会议',
      list: [
        {
          content: '发起会议'
        },
        {
          content: '会议列表'
        }
      ]
    }
  },
  methods: {
    handleDetail (item) {
      const content = '发起会议'
      if (item.content === content) {
        this.$router.push('/me/meeting/launch')
      } else {
        this.$router.push('/me/meeting/meets')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.meeting
  initPosition()
  background-color $space
  box-sizing border-box
  padding-top 108px
  z-index 20

.about-list
  width 100%
  padding()

  .about-item
    margin-bottom 20px
    width 100%
    height 141px
    background $common_bgc
    border-radius 20px
    display flex
    justify-content space-between
    align-items center
    padding()

    &:active
      background-color $recommend_title

    .desc
      text-indent 20px
      font-size $shop_name
      font-weight 400
      color $order_content

    i
      font-size 32px
      color $sub_icon

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
